<template>
    <div>
        <div class="discussion_list" v-if="ReplyMain">
            <div v-if="ReplyMain.length > 0">
                <div class="title" v-if="showtitle">
                    <h3>
                        热门评论<span>{{ ReplyMainLength }}</span>
                    </h3>
                    <p class="iconfont icon-dengyu" @click.stop="change"><span>按热度</span></p>
                </div>
                <div class="title" v-else>
                    <h3>
                        最新评论<span>{{ ReplyMainLength }}</span>
                    </h3>
                    <p class="iconfont icon-dengyu" @click.stop="change"><span>按时间</span></p>
                </div>
            </div>

            <div class="user_info" v-for="(item, index) in ReplyMain" :key="index">
                <van-image
                    class="img"
                    width="35px"
                    height="35px"
                    radius="50%"
                    :src="item.member.avatar"
                ></van-image>
                <div class="user_message">
                    <div v-if="mode == 3">
                        <h3>{{ item.member.uname }}</h3>
                        <p>{{ item.ctime | fornatTime }}</p>

                        <div ref="messages" :class="[item.showMes ? 'message' : 'messages']">
                            <div v-for="(msg, i) in item.content.message.split('\n')" :key="i">
                                <div v-html="msg"></div>
                            </div>
                        </div>
                        <div v-if="heights[index] >= 135" class="more" @click.stop="moreMes(index)">
                            {{ item.showMes ? "收起" : "展开" }}
                        </div>

                        <div class="icon">
                            <div class="like" @click.stop="like(index)">
                                <img v-if="!item.islike" src="../assets/images/like.png" alt="" />
                                <img v-else src="../assets/images/likeblue.png" alt="" />
                                {{ item.like > 0 ? item.like : "" }}
                            </div>
                            <div class="unlike" @click.stop="unlike(index)">
                                <img
                                    v-if="!item.isunlike"
                                    src="../assets/images/unlike.png"
                                    alt=""
                                />
                                <img v-else src="../assets/images/unlikebule.png" alt="" />
                            </div>
                            <div class="share">
                                <img src="../assets/images/share.png" alt="" />
                            </div>
                            <div class="msg">
                                <img src="../assets/images/msg.png" alt="" />
                                {{ item.rcount > 0 ? item.rcount : "" }}
                            </div>
                        </div>

                        <div class="reply_info" v-if="item.replies">
                            <div class="reply" v-for="(reply, i) in item.replies" :key="i">
                                <div class="msg">
                                    <span>{{ reply.member.uname }}:</span>
                                    <b v-html="reply.content.message.split('\n')[0]"></b>
                                </div>
                            </div>
                            <router-link
                                :to="`/replyDetail/${item.rpid}`"
                                class="moreReply"
                                v-if="item.rcount > 3"
                            >
                                {{ item.reply_control.sub_reply_entry_text }} <span>></span>
                            </router-link>
                        </div>
                    </div>
                    <div v-if="mode == 2">
                        <h3>{{ item.member.uname }}</h3>
                        <p>{{ item.ctime | fornatTime }}</p>

                        <div ref="messages" :class="[item.showMes ? 'message' : 'messages']">
                            <div v-for="(msg, i) in item.content.message.split('\n')" :key="i">
                                <div v-html="msg"></div>
                            </div>
                        </div>
                        <div v-if="heights[index] >= 135" class="more" @click.stop="moreMes(index)">
                            {{ item.showMes ? "收起" : "展开" }}
                        </div>

                        <div class="icon">
                            <div class="like" @click.stop="like(index)">
                                <img v-if="!item.islike" src="../assets/images/like.png" alt="" />
                                <img v-else src="../assets/images/likeblue.png" alt="" />
                                {{ item.like > 0 ? item.like : "" }}
                            </div>
                            <div class="unlike" @click.stop="unlike(index)">
                                <img
                                    v-if="!item.isunlike"
                                    src="../assets/images/unlike.png"
                                    alt=""
                                />
                                <img v-else src="../assets/images/unlikebule.png" alt="" />
                            </div>
                            <div class="share">
                                <img src="../assets/images/share.png" alt="" />
                            </div>
                            <div class="msg">
                                <img src="../assets/images/msg.png" alt="" />
                                {{ item.rcount > 0 ? item.rcount : "" }}
                            </div>
                        </div>
                        <div class="reply_info" v-if="item.replies.length != 0">
                            <div class="reply" v-for="(reply, i) in item.replies" :key="i">
                                <div class="msg">
                                    <span>{{ reply.member.uname }}:</span>
                                    <b v-html="reply.content.message.split('\n')[0]"></b>
                                </div>
                            </div>
                            <router-link
                                :to="`/replyDetail/${item.rpid}`"
                                class="moreReply"
                                v-if="item.rcount > 3"
                            >
                                {{ item.reply_control.sub_reply_entry_text }} <span>></span>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["ReplyMain", "ReplyMainLength"],
    filters: {
        fornatTime(value) {
            let d = new Date(value * 1000);
            let year = d.getFullYear();
            let month = d.getMonth() + 1;
            let day = d.getDate();
            let time = year + "-" + month + "-" + day;
            return time;
        },
    },
    data() {
        return {
            height: [],
            heightMode: [],
            showtitle: true,
            mode: 3,
            isunlike: false,
            likeNum: 0,
        };
    },
    created() {},
    mounted() {
        setTimeout(() => {
            if (this.$refs.messages) {
                this.height = [];
                this.$refs.messages.forEach((v) => {
                    this.height.push(v.offsetHeight);
                });
            }
        }, 2000);
    },
    computed: {
        heights() {
            if (this.mode == 3) {
                return this.height;
            } else {
                return this.heightMode;
            }
        },
    },
    methods: {
        moreMes(index) {
            this.$emit("moreMes", index);
        },
        change() {
            this.showtitle = !this.showtitle;
            if (this.mode == 3) {
                this.mode = 2;
                setTimeout(() => {
                    this.heightMode = [];
                    if (this.$refs.messages) {
                        this.$refs.messages.forEach((v) => {
                            this.heightMode.push(v.offsetHeight);
                        });
                    }
                }, 1000);
                this.$emit("change", this.mode);
            } else {
                this.mode = 3;

                this.$emit("change", this.mode);
            }
        },
        like(index) {
            this.$emit("like", index);
        },
        unlike(index) {
            this.$emit("unlike", index);
        },
    },
};
</script>

<style lang="scss" scoped>
.discussion_list {
    padding: 0 15px;
    .title {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #ebecee;
        padding-top: 10px;

        h3 {
            font-size: 14px;
            font-weight: bold;
            opacity: 0.7;
            span {
                margin-left: 5px;
                border-radius: 20px;
                padding: 2px 5px;
                color: #999;
                border: 1px solid #999;
                font-size: 12px;
            }
        }
        .iconfont {
            font-size: 14px;
            font-weight: bold;
            opacity: 0.3;
            span {
                padding-left: 5px;
            }
        }
    }
    .user_info {
        display: flex;
        padding: 15px 0;
        .img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }
        .user_message {
            flex: 1;
            padding-left: 15px;
            font-size: 12px;
            overflow: hidden;
            p {
                color: #999;
            }
            h3 {
                color: #999;
            }

            .messages {
                margin-top: 20px;
                font-size: 15px;
                color: #000;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 6;
            }
            .message {
                margin-top: 20px;
                font-size: 15px;
                color: #000;
                width: 80vw;
                overflow: hidden;
            }
            .more {
                color: #49b4fc;
                font-size: 16px;
            }
            .icon {
                display: flex;
                color: #999;
                padding: 15px 0;
                img {
                    width: 16px;
                    height: 16px;
                    vertical-align: middle;
                }
                .like {
                    img {
                        padding-right: 3px;
                    }
                    padding-right: 20px;
                }
                .unlike {
                    img {
                    }
                    padding-right: 20px;
                }
                .share {
                    img {
                    }
                    padding-right: 20px;
                }
                .msg {
                    img {
                    }
                    padding-right: 20px;
                }
            }

            .reply_info {
                padding-top: 20px;
                background: #f4f5f7;
                overflow: hidden;
                .reply {
                    padding: 0 20px 0 10px;
                    margin-bottom: 10px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    span {
                        color: #49b4fc;
                        padding-right: 5px;
                    }
                    b {
                        color: #999;
                        font-weight: normal;
                    }
                }
                .moreReply {
                    color: #49b4fc;
                    padding: 0 20px 10px 10px;
                    span {
                        font-family: "宋体";
                    }
                }
            }
        }
    }
}
</style>
